<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/jquery.dataTables.min.css}" />
    <link rel="stylesheet" th:href="@{/css/matrix-style.css}" />
    <link rel="stylesheet" th:href="@{/css/matrix-media.css}" />
    <link rel="stylesheet" th:href="@{/css/metroStyle.css}" type="text/css">
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />
    <title>日志管理</title>
</head>
<body>

<!--Header-part-->
<div id="header">
    <h1><a href="dashboard.html">通用权限管理</a></h1>
</div>
<!--close-Header-part-->

<!--top-Header-menu-->
<div th:include="common/top :: top"></div>
<div th:include="common/menu :: menu"></div>
<div id="content">
    <div id="content-header">
        <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a> </div>
    </div>
    <div class="container-fluid">
        <hr>
        <div class="row-fluid">
            <div class="span12">

                <div class="widget-box">
                    <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
                        <h5>日志列表</h5>
                    </div>
                    <form class="form-inline">
<!--                        <div class="form-group">-->
<!--                            <label >编号:</label>-->
<!--                            <input type="text" class="form-control" id="id-search" placeholder="编号:"/>-->
<!--                        </div>-->
                        <div class="form-group">
                            <label >详情:</label>
                            <input type="text" class="form-control" id="logDesc-search" placeholder="日志详情关键字"/>
                        </div>

                        <div class="form-group">
                            <label >开始时间:</label>
                            <input type="date" class="form-control" id="createTime-search" placeholder="日志详情关键字"/>
                        </div>

                        <div class="form-group">
                            <label >截止时间:</label>
                            <input type="date" class="form-control" id="endTime-search" placeholder="日志详情关键字"/>
                        </div>

                        <button type="button"  onclick="search();" class="btn btn-primary">查询</button>
                        <button type="button" shiro:hasPermission="/logs/add" onclick="$('#addLog').modal();" class="btn btn-info" style="float: right; margin-right: 1px;">新增</button>
                        <button type="button" shiro:hasPermission="/logs/delete" onclick="delById();" class="btn btn-info" style="float: right; margin-right: 1px;">删除</button>
<!--                        <button type="button" shiro:hasPermission="/roles/saveRoleResources" onclick="allotResources();" class="btn btn-info" style="float: right; margin-right: 1px;">分配权限</button>-->
                        <button shiro:hasPermission="/logs/exportLog" type="button" onclick="exportLog();" class="btn btn-info" style="float: right; margin-right: 1px; ">导出数据</button>
                    </form>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered data-table" id="datatable" >
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" class="checkall" />
                                </th>
                                <th>编号</th>
                                <th>日志详情</th>
                                <th>记录时间</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<!--添加弹框-->
<div class="modal fade" id="addLog" tabindex="-1" role="dialog" aria-labelledby="addlogLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addlogLabel">新增日志</h4>
            </div>
            <div class="modal-body">
                <form id="logForm">
                    <div class="form-group">
                        <label class="control-label">日志信息:</label>
                        <input type="text" class="form-control" name="logDesc" id="logDesc" placeholder="请输入日志信息"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="addLog();" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--/添加弹框-->



<!--Footer-part-->
<div class="row-fluid">
    <div id="footer" class="span12">2021 @kh<a href="http://www.baidu.com">RBAC</a> </div>
</div>
<!--end-Footer-part-->
<script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/layer.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.ztree.excheck.js}"></script>

<script type="text/javascript">
    $(".checkall").click(function () {
        var check = $(this).prop("checked");
        $(".checkchild").prop("checked", check);
    });
    var table;
    $(document).ready(function() {
        table = $('#datatable').DataTable({
            "dom": '<"top"i>rt<"bottom"flp><"clear">',
            "searching": false,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "serverSide": true,//开启服务器模式，使用服务器端处理配置datatable
            "processing": true,//开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
            //"ajax": 'logs',

            //封装请求参数 --组合条件查询
            ajax : function(data, callback, settings) {
            var param = getQueryCondition(data);
            $.ajax({
                type: "GET",
                url: 'logs',
                cache: false,  //禁用缓存
                data: param,    //传入已封装的参数
                dataType: "json",
                success: function (result) {
                    //封装返回数据 。
                    var returnData = {};
                    returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
                    returnData.recordsTotal = result.recordsTotal;//总记录数
                    returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果
                    returnData.data = result.data;
                    //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                    //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                    callback(returnData);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("查询失败");
                }
            });
        },
            "columns": [
                {
                    "sClass": "text-center",
                    "data": "id",
                    "render": function (data, type, full, meta) {
                        return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                    },
                    "bSortable": false
                },
                { "data": "id" },
                { "data": "logDesc" },
                 {"data":"createTime"}
            ],
            columnDefs:[
                { "orderable": false, "targets": 1 },
                { "orderable": false, "targets": 2 },
                { "orderable": false, "targets": 3 },
            ],

        } );

    } );
    function search(){
        table.ajax.reload();
    }
    //封装查询参数
    function getQueryCondition(data){
        var param = {};
        //组装排序参数
      //  param.id = $("#id-search").val();//查询条件
        param.logDesc = $("#logDesc-search").val();//查询条件
        param.CreateTime = $("#createTime-search").val();//开始时间
        param.endTime = $("#endTime-search").val();//截止时间
       // 组装分页参数
        param.start = data.start;
        param.length = data.length;
        param.draw = data.draw;
        return param;
    }
   // 新增日志
    function addLog() {
        var logDesc = $("#logDesc").val();
        if(logDesc == "" || logDesc == undefined || logDesc == null){
            return layer.msg('日志信息不能为空', function(){
                //关闭后的操作
            });
        }
        $.ajax({
            cache: true,
            type: "POST",
            url:'logs/add',
            data:$('#logForm').serialize(),// formId
            async: false,
            success: function(data) {
                if(data=="success"){
                    layer.msg('保存成功');
                    table.ajax.reload();
                    $('#addLog').modal('hide');
                }else{
                    layer.msg('保存失败');
                    $('#addLog').modal('hide');
                }
                console.log("数据",$('#logForm').val)
            }
        });
    }

   // 删除日志
    function delById() {
        var ids = new Array(); //存储输入的数组
        $(".checkchild:checked").each(function ()
        {
            ids.push($(this).val())
        })
        var id = ids.toString()
        if ($(".checkchild:checked").length < 1)
        {
            layer.msg('请选择一条数据');
            return;
        }
        layer.confirm('您确定要删除该角色吗？', {
            btn: ['确认','取消'] //按钮
        }, function(){
            $.ajax({
                cache: true,
                type: "POST",
                url:'logs/delete',
                data:{ids:id},
                async: false,
                success: function(data) {
                    if(data=="success"){
                        layer.msg('删除成功');
                        table.ajax.reload();
                    }else{
                        layer.msg('删除失败');
                    }
                }
            });
        });
    }
    //导出数据
    function exportLog() {
        $.ajax({
            cache: true,
            type: "POST",
            url:'logs/exportLog',
            success: function(data) {
                if(data=="success"){
                    layer.msg('导出成功');
                    table.ajax.reload();
                }else
                {
                    layer.msg("导出失败")
                }
            }
        })
    }
</script>
</body>
</html>